<template>
  <div>
    <my-father></my-father>
    <my-ceshi ref="myceshi"></my-ceshi>
    <p class="ceshi" ref="ceshi">123</p>
    <button @click="show">按钮</button>
    <input type="text" v-if="flag" ref="myinput" />
  </div>
</template>

<script>
import MyFather from "@/components/MyFather.vue";
import MyCeshi from "@/components/MyCeshi.vue";
export default {
  mounted() {
    //我们在vue中不推荐使用document.querySelector这些api，因为可能会找错了
    // 在vue中我们需要用一个ref的东西，这个东西就只会在当前组件中找
    // console.log(document.querySelector(".ceshi").innerHTML);
    // ref的好处
    // 1. 只会在当前组件中去找，避免了全局污染
    // 2. 它比document.queryselector更加高级，document.querySelector只能找dom元素，而ref可以找dom也可以找组件
    // console.log(this.$refs.ceshi);
    // console.log(this.$refs.myceshi.fn);
  },
  provide: {
    msg: "hello",
  },
  components: { MyFather, MyCeshi },
  data() {
    return {
      flag: false,
    };
  },
  methods: {
    show() {
      //数据更新了，视图不会立即更新，会在事件循环下一次才会同步
      this.flag = true;
      //这个定时器是宏任务 ，宏任务没有Promise.then好
      // Vue中就为我们提供了一个更加好的api叫nextTick，这个nextTick内部是封装Promise.then,setTimeout,
      // 先看当前用户浏览器支持不支持Promise.then,如果支持直接用，如果不支持就降级为settimeout
      // setTimeout(() => {
      //   console.log(this.$refs.myinput);
      // }, 0);
      // this.$nextTick(callback) callback会在视图更新一瞬间就会调用，就可以保证代码能拿到最新的视图中内容
      this.$nextTick(() => {
        this.$refs.myinput.focus();
      });
    },
  },
};
</script>

<style scoped></style>

